import type { Component } from 'vue';
import * as AntdIcons from '@vicons/antd';
import * as CarbonIcons from '@vicons/carbon';
import * as FaIcons from '@vicons/fa';
import * as FluentIcons from '@vicons/fluent';
import * as Icons4 from '@vicons/ionicons4';
import * as Icons5 from '@vicons/ionicons5';
import * as MaterialIcons from '@vicons/material';
import * as TablerIcons from '@vicons/tabler';

/**
 * 图标库映射
 */
const iconLibraries = {
  fa: FaIcons,
  fluent: FluentIcons,
  carbon: CarbonIcons,
  antd: AntdIcons,
  icons4: Icons4,
  icons5: Icons5,
  material: MaterialIcons,
  tabler: TablerIcons,
};

export function renderIcon(icon: string | Component, size: number = 16, className?: string) {
  for (const library in iconLibraries) {
    const icons = iconLibraries[library];
    const resolvedIcon = icons[icon] as Component | undefined;

    if (resolvedIcon) {
      return h(
        resolvedIcon,
        {
          class: className,
          style: size ? { width: `${size}px`, height: `${size}px` } : undefined,
        },
      );
    }
  }
  return h(
    icon,
    {
      class: className,
      style: size ? { width: `${size}px`, height: `${size}px` } : undefined,
    },
  );
}
